//面包屑组件
import React from 'react';
import { Link } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import MenuData from '../../utils/menuData'
import './breadcrumb.scss'

//页面名不在数据返回菜单中存在时
//自定义匹配子页
const breadcrumbNameOther = {

    '/index/auther/autherAccount/addNewAcc': '账号创建',
    '/index/auther/autherAccount/accDetail': '账号信息变更',
    '/index/auther/autherAccount/editAcc' : '账号信息编辑',
   
    '/index/hardwareCenter/programConfig/programConfigDetail/NewProject':'新建项目',
    '/index/deviceLibrary/buyDetail':'采购详情',

    // 设备库
    '/index/deviceLibrary/deviceBuy':'设备采购',
    '/index/deviceLibrary/deviceInfo':'设备详情/变更记录',
    '/index/deviceLibrary/deviceBuy/addNewDevice':'采购录入',
    '/index/deviceLibrary/addNewType/addNewType':'新增型号',
    '/index/deviceLibrary/deviceBuy/buyDetail':'采购详情'

}

export class BreadcrumbNav extends React.Component {
    constructor(props, context) {
        super(props, context)
        this.state = {
            pathSnippetds: null,
            exrtraBreadcrumbItems: null
        }
        this.getPath()
    }
    componentWillReceiveProps() {
        this.getPath()
    }
    
    getPath = () => {
        const pathSnippets = window.location.pathname.split('/').filter(i => i);
        //匹配菜单数据
        MenuData.data().then(data => {
            const breadcrumbNameMap = data;
            let itemsName, itemsChildName;
            const extraBreadcrumbItems = pathSnippets.map((_, index) => {
                //用来匹配的url
                let url = pathSnippets.length > 3 ? `/${pathSnippets.slice(0, 3).join('/')}` : window.location.pathname;
                breadcrumbNameMap.forEach((item, i) => {
                    if (!item.children){
                        if (`/index/${item.menu_url}` === url) {
                            itemsChildName = item.menu_name
                            itemsName = breadcrumbNameMap[i].menu_name
                        }
                        return;
                    }
                    item.children.forEach((el, ind) => {
                        if (`/index/${el.menu_url}` === url) {
                            itemsChildName = el.menu_name
                            itemsName = breadcrumbNameMap[i].menu_name
                        }
                    })
                })
               
                if (index === 0) {
                    return '';
                } else if (index === 1) {
                    // return ''
                    if (itemsName == itemsChildName){
                        return ''
                        // return itemsName
                        // 有改动，return ''
                    }
                    return (
                        <Breadcrumb.Item key={url} className="BreadcrumbItem" >{itemsName}</Breadcrumb.Item>
                    )
                } else if (index === 2) {
                    if (pathSnippets.length > 3){
                        return (
                            <Breadcrumb.Item key={url}>
                                <Link to={url}>
                                    {itemsChildName}
                                </Link>
                            </Breadcrumb.Item>
                        )
                    }else{
                        return (
                            <Breadcrumb.Item key={url}>
                                {itemsChildName}
                            </Breadcrumb.Item>
                        )
                    }
                    
                } else if (index === pathSnippets.length - 1) {
                    return (
                        <Breadcrumb.Item key={`/${pathSnippets.slice(0, index + 1).join('/')}`}>
                            {breadcrumbNameOther[`/${pathSnippets.slice(0, index + 1).join('/')}`]}
                        </Breadcrumb.Item>
                    )
                } else {
                    return (
                        <Breadcrumb.Item key={`/${pathSnippets.slice(0, index + 1).join('/')}`}>
                            {/* <Link to={`/${pathSnippets.slice(0, index + 1).join('/')}`}> */}
                                {breadcrumbNameOther[`/${pathSnippets.slice(0, index + 1).join('/')}`]}
                            {/* </Link> */}
                        </Breadcrumb.Item>
                    )
                }
            });
            this.setState({
                extraBreadcrumbItems
            })
        })
    }
    render() {
        const { extraBreadcrumbItems } = this.state;
        return <Breadcrumb separator=">">{extraBreadcrumbItems}</Breadcrumb>
    }
}
export default BreadcrumbNav;